<template>
      <div id="aside">
            <div class="con">
                  <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        router
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                        
                        <el-menu-item v-for="(item, index) in MenuList" :key="index" :index="item.name">
                              <i :class="item.pic"></i>
                              
                              <span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                  </el-menu>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        height: "",
                        MenuList: [],
                  }
            },
            created () {
                  // this.getMenuList();
                  this.getLeftMenu()
            },
            mounted () {
                  this.getHeight();
            },
            
            computed: {
                  token() {
                        return localStorage.miniToken; 
                  },
            },
            methods: {
                  getHeight() {
                        let height = document.documentElement.clientHeight
                        let bar = document.querySelector("#aside")
                        bar.style.height = (height - 60) + "px"
                  },
                  // 获取导航按钮
                  async getMenuList() {
                        let res = await this.$axios.post("/admin/role/menu_module_show", { token: this.token })
                        //console.log(res);
                        this.MenuList = res.data.data
                  },
                  // 获取左侧按钮
                  async getLeftMenu() {
                        let res = await this.$axios.post("/admin/user/leftside", { token: this.token })
                        // console.log(res);
                        this.MenuList = res.data.data
                  },
            },
      }
</script>

<style lang="scss" scoped>
#aside {
      width: 200px;
      background-color: #545c64;
      .con {
            width: 200px;
      }
}
</style>